<template>
	<view class="notice_box">
		<MyTip/>
		<scroll-view 
			:scroll-top="scroolTop" 
			:scroll-y="true" 
			:upper-threshold="100"
			@scrolltoupper="scrolltoupper"
			class="scroll-Y">
			<view class="load_box">
				<uni-load-more :content-text="contentText" iconType="circle" :color="primary_hot_color" :status="loadingStatus" />
			</view>
			<template v-if="allNoticeData.length">
				<view id="demo1" v-for="item in allNoticeData" :key="item.id">
					<NoticeCard :noticeData="item"/>
				</view>				
			</template>
			<view v-else>
				<MyNull img="nullContent.png"/>
			</view>
		</scroll-view>
		<view class="create_notice" @click="toCreateNotice">
			<MyIcons size="130rpx" :src="joinSystemPath('addNotice.png')"/>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'
	
	import {nextTick, ref} from 'vue'
	
	import NoticeCard from '@/components/Dormitory/NoticeCard/NoticeCard.vue'
	import MyIcons from '@/components/MyIcons/MyIcons.vue'
	import MyNull from '@/components/MyNull/MyNull.vue'
	import MyTip from '@/components/Tips/Tips.vue'
	
	import {
		dynamicStyleStore
	} from '@/stores/dynamicStyle.js'
	
	import {
		DormitoryModel
	} from '@/service/model/dormitory.js'
	
	import {
		joinSystemPath
	} from '@/utils/imgJoinName.js'
	
	const dynamicStyle_store = dynamicStyleStore()
	const dormitoryModel = new DormitoryModel()

	const {
		primary_hot_color,
		primary_shallow_color,
		primary_main_bgc,
		dormitory_cover_border_color,
		primary_text_color,
		primary_text_hot_color,
		joiner_color,
		info_bgc,
		dormitory_name_color,
		joiner_bgc,
		joiner_card_bgc
	} = dynamicStyle_store.dormitoryStyle
	
	const allNoticeData = ref([])
	const limit = 7
	const page = ref(0)
	const isAllowScrollGet = ref(true)
	const loadingStatus = ref('more')
	const contentText =ref({
		contentdown: '上滑加载更多',
		contentrefresh: '加载公告中',
		contentnomore: '没有更多公告了'
	})
	const scroolTop = ref(0)
	
	const dormitoryAllId = uni.getStorageSync('homeData')
	
	//获取所有公告列表
	const getNoticeFun=async ()=>{
		loadingStatus.value='loading'
		const {data,success} = await dormitoryModel.getNotice({
			limit,
			page:page.value,
			orderBy:'createAt.desc'
		},dormitoryAllId.dormitory_id)
		if(success){
			allNoticeData.value=[...data.reverse(),...allNoticeData.value]
			if(!allNoticeData.value.length || !data.length || data.length<limit){
				isAllowScrollGet.value=false
				loadingStatus.value="noMore"
			}else{
				loadingStatus.value='more'
			}
			nextTick(()=>{
				if(!scroolTop.value)  scroolTop.value=10000000000000000000000000
			})
		}
	}
	
	const init=()=>{
		page.value=0
		scroolTop.value=0
		isAllowScrollGet.value=true
		allNoticeData.value = []
		getNoticeFun()
	}
	
	//滑动到顶部
	const scrolltoupper=()=>{
		if(!isAllowScrollGet.value) return
		page.value++
		getNoticeFun()
	}
	
	//去往创建公告页面
	const toCreateNotice=()=>{
		uni.navigateTo({
			url:'/pages/Dormitory/CreateNotice/CreateNotice'
		})
	}
	
	onShow(()=>{
		init()
	})
</script>

<style lang="less">
	.notice_box{
		height: calc(100vh);
		background-color: v-bind(primary_main_bgc);
		.create_notice{
			width: 130rpx;
			height: 130rpx;
			position: fixed;
			bottom: 100rpx;
			right: 50rpx;
			z-index: 10;
			background-color: v-bind(primary_hot_color);
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.create_notice:hover{
			background-color: v-bind(primary_shallow_color);
		}
		.scroll-Y {
			height: calc(100vh);
		}
	}
</style>
